<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/common.js"></script>
    <script src="./assets/mui/js/mui.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./assets/zepto/zepto.min.js"></script>
</head>
<body>
        <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">学校名称</h1>
        </header>
        <div id="slider" class="mui-slider" >
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="./images/zhishi.png">
                        </a>
                    </div>
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                                <img src="./images/zhishi.png">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                                <img src="./images/zhishi.png">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                                <img src="./images/zhishi.png">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                                <img src="./images/zhishi.png">
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                                <img src="./images/zhishi.png">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
                
            </div>
   <div class="grid">
       <ul>
           <li><a href="introduce.html"><img src="/images/shouye01@2x.png" alt=""><br><span>走进校园</span></a></li>
           <li><a href="#"><img src="/images/shouye02@2x.png" alt=""><br><span>走进校园</span></a></li>
           <li><a href="#"><img src="/images/shouye03@2x.png" alt=""><br><span>走进校园</span></a></li>
       </ul>
   </div>
      <div class="content">
          <ul>
              <li><img src="./images/shouye001.png" alt="">
                <div class="con-r">
            <h1>VIPKID推出青少年英语蜂校</h1>
           <p>VIPKID推出青少年英语蜂校VIPKID推英语蜂校VIPKID推出青少年英语蜂校VIPKID推出青少年英语蜂校</p></div></li>
           <li><img src="./images/shouye001.png" alt="">
            <div class="con-l">
           <h1>VIPKID推出青少年英语蜂校</h1>
           <p>VIPKID推出青少年英语蜂校VIPKID推出青少年蜂校VIPKID推出青少年英语蜂校VIPKID推出青少年英语蜂校</p></div></li>
           <li><img src="./images/shouye001.png" alt="">
            <div class="con-r">
           <h1>VIPKID推出青少年英语蜂校</h1>
           <p>VIPKID推出青少年英语蜂校VIPKID推出青少年蜂校VIPKID推出青少年英语蜂校VIPKID推出青少年英语蜂校</p></div></li>
          </ul>
      </div>
      <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar">
                    <span class="mui-icon"><img src="./images/dibu01@2x.png" alt=""></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-chat">
                <span class="mui-icon"><img src="./images/dibu03@2x.png" alt=""></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-contact">
                    <span class="mui-icon"><img src="./images/dibu06@2x.png" alt=""></span>
                <span class="mui-tab-label">通讯录</span>
            </a>
        </nav>   
         
</body>
</html>